<template>
  <div>
    <nav-bar :title="title" rightBar search/>
    <div class="content-body">
      <page-skeleton title avatar :loading="loading" :row="1" :count="10">
        <div v-for="(item,index) in chatList">
          <chat-cell
            :title="item.title"
            :mute="item.mute"
            :time="item.time"
            :message="item.message"
            :headUrl="item.headUrl"
            :top="item.top"
            @touchstart.native="longPress(item)"
            @touchend.native="cancelPress($event)"
            @touchmove.native="cancelPress($event)"
            @click.native="onClickChatCell(item)"/>
        </div>
      </page-skeleton>
    </div>
    <van-action-sheet close-on-click-action v-model="showChatAction" :actions="actions" @select="onSelectChatAction" />
  </div>
</template>

<script>
import PageSkeleton from "@/components/PageSkeleton"
import NavBar from "@/components/NavBar"
import ChatCell from "@/components/ChatCell"
import { Toast } from "vant";
export default {
  name: "Chat",
  components: {
    PageSkeleton,
    NavBar,
    ChatCell
  },
  data () {
    return {
      title: "微信",
      loading: false,
      Loop: null, //定义定时器
      showChatAction:false,
      actions: [],
      sysActions: [{"name": "不显示该聊天"},{"name": "删除该聊天"}],
      userActions: [{"name": "标为未读"},{"name": "置顶该聊天"},{"name": "不显示该聊天"},{"name": "删除该聊天"}],
      subsActions: [{"name": "标为未读"},{"name": "置顶公众号"},{"name": "不再关注"},{"name": "不显示该聊天"},{"name": "删除该聊天"}],
      chatList: [
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "已读用户",
          type: "1",
          id: "111",
          time: "晚上7:30",
          message: "大龙：早！",
          mute: false,
          top: true,
          unread: 0
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "未读群聊",
          type: "2",
          id: "111",
          time: "晚上7:30",
          message: "大龙：早！",
          mute: true,
          top: true,
          unread: 3
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "系统消息",
          type: "0",
          id: "1112",
          time: "昨天",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: true
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "公众号",
          type: "3",
          id: "1113",
          time: "周五",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户D",
          type: "1",
          id: "1114",
          time: "2月13日",
          message: "大龙：早！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户E",
          id: "1115",
          time: "2020年12月13日",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户E",
          id: "1115",
          time: "2020年12月13日",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户E",
          id: "1115",
          time: "2020年12月13日",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户E",
          id: "1115",
          time: "2020年12月13日",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户E",
          id: "1115",
          time: "2020年12月13日",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户E",
          id: "1115",
          time: "2020年12月13日",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户E",
          id: "1115",
          time: "2020年12月13日",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户E",
          id: "1115",
          time: "2020年12月13日",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户F0",
          id: "1115",
          time: "2020年12月13日",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        },
        {
          headUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          title: "用户F1",
          id: "1115",
          time: "2020年12月13日",
          message: "大龙：消息下次消息下次消息下次消息下次消息下次消息下次！",
          mute: false
        }
      ],
      chatItem: {}
    }
  },
  mounted() {
    document.getElementById("app").scrollTop = 0;
  },
  activated:function(){
    Toast("activated");
  },
  methods: {
    // 删除地址，长按开始
    longPress (item) {
      // 清空定时器
      clearInterval(this.Loop);
      // 设置一秒长按时间触发逻辑
      this.Loop = setTimeout(function() {
        this.showChatAction = true;
        this.chatItem = item;
        this.initSelectActionTemplate(item);
      }.bind(this), 650);
    },
    // 删除地址，长按结束
    cancelPress (event) {
      // 触摸结束或滑动时清空定时器
      clearInterval(this.Loop)
    },
    onClickChatCell(item) {
      this.$router.push({name:'chatRoom', params:item});
    },
    initSelectActionTemplate(item){
      switch (item.type) {
        case '0':
          this.actions = this.sysActions;
          break;
        case '1':
          this.actions = this.userActions;
          this.actions[1].name = "置顶该聊天"
          this.initUnreadAndTopTemplate(item)
          break;
        case '2':
          this.actions = this.userActions;
          this.actions[1].name = "置顶该聊天"
          this.initUnreadAndTopTemplate(item)
          break;
        case '3':
          this.actions = this.subsActions;
          this.actions[1].name = "置顶公众号"
          this.initUnreadAndTopTemplate(item)
          break;
      }
    },
    initUnreadAndTopTemplate(item) {
      if(item.unread && item.unread > 0) {
        this.actions[0].name = "标为已读"
      }else {
        this.actions[0].name = "标为未读"
      }
      if(item.top) {
        this.actions[1].name = "取消置顶"
      }
    },
    onSelectChatAction(action) {
      Toast(action.name);
      if(action.name == "") {

      }
      console.log(this.chatItem)
    },
  }
};
</script>
<style scoped>
  .content-body {
    width: 100%;
    display: inline-flex;
    margin-top: 1.22667rem;
    margin-bottom: 1.33333rem;
  }
</style>
